@extends('layouts.default')
@section('main')
    <link rel="stylesheet" href="/css/uniform.css" />
    <link rel="stylesheet" href="/css/select2.css" />

    <script type="text/javascript" src="{{URL::asset('js/')}}/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/hightcharts/highcharts.js"></script>
    <script src="{{URL::asset('js/My97DatePicker/')}}/WdatePicker.js"></script>

    <script>
        //初始函数，设置定时器，定时取数据
        $(function () {
            queryDayStartData();
        });

        //图表属性，不包含数据
        var dayStartOptions = {
            chart: {
                renderTo:'dayStartCon',
                type:'spline'
            },
            title: {
                text: '日首次启动数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '首次启动数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: '总数'
            },  {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: '次'
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var weekStartOptions = {
            chart: {
                renderTo:'weekStartCon',
                type:'spline'
            },
            title: {
                text: '周首次启动统计(工作周)',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '周首次启动数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: '总数'
            },  {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: ''
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };

        var monthStartOptions = {
            chart: {
                renderTo:'monthStartCon',
                type:'spline'
            },
            title: {
                text: '月首次启动数据统计',
                x: -20 //center
            },
            xAxis:{

            },
            yAxis: {
                title: {
                    text: '月首次启动数'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            series: [{
                name: '总数'
            },  {
                name: 'ios'
            }, {
                name: 'android'
            }],
            tooltip: {
                valueSuffix: ''
            },
            credits:{
                // enabled:true,                    // 默认值，如果想去掉版权信息，设置为false即可
                text:'无界投融',               // 显示的文字
                href:'',   // 链接地址
                position:{                          // 位置设置
                    align: 'left',
                    x: 1050,
                    verticalAlign: 'bottom',
                    y: -30
                },
                style: {                            // 样式设置
                    cursor: 'pointer',
                    color: 'blue',
                    fontSize: '10px'
                }
            },
            plotOptions: {
                spline:{
                    dataLabels: {
                        enabled: true
                    },
                    animation:false
                }
            }
        };


        var dayStartCategories = [];
        var dayTotalStartDatas = [];
        var dayIosStartDatas = [];
        var dayAndroidStartDatas = [];

        var weekStartCategories = [];
        var weekTotalStartDatas = [];
        var weekIosStartDatas = [];
        var weekAndroidStartDatas = [];


        var monthStartCategories = [];
        var monthTotalStartDatas = [];
        var monthIosStartDatas = [];
        var monthAndroidStartDatas = [];

        //Ajax 获取数据并解析创建Highcharts图表
        function queryDayStartData() {
            $.ajax({
                url:'/useranalyze/day-start',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        dayStartCategories[i] = n[0];
                        for(var j in n[1]){

                            if(j=='total'){
                                dayTotalStartDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                dayIosStartDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                dayAndroidStartDatas[i] = n[1][j]*1;
                            }
                        }
                    });
                    dayStartOptions.xAxis.categories = dayStartCategories;
                    dayStartOptions.series[0].data = dayTotalStartDatas;
                    dayStartOptions.series[1].data = dayIosStartDatas;
                    dayStartOptions.series[2].data = dayAndroidStartDatas;
                    chart = new Highcharts.Chart(dayStartOptions);
                }
            });

            $.ajax({
                url:'/useranalyze/week-start',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        weekStartCategories[i] = n[0];

                        for(var j in n[1]){

                            if(j=='total'){
                                weekTotalStartDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                weekIosStartDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                weekAndroidStartDatas[i] = n[1][j]*1;
                            }
                        }
                    });
                    weekStartOptions.xAxis.categories = weekStartCategories;
                    weekStartOptions.series[0].data = weekTotalStartDatas;
                    weekStartOptions.series[1].data = weekIosStartDatas;
                    weekStartOptions.series[2].data = weekAndroidStartDatas;
                    chart = new Highcharts.Chart(weekStartOptions);
                }
            });

            $.ajax({
                url:'/useranalyze/month-start',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,n){
                        monthStartCategories[i] = n[0];
                        for(var j in n[1]){

                            if(j=='total'){
                                monthTotalStartDatas[i] = n[1][j]*1;
                            }

                            if(j=='ios'){
                                monthIosStartDatas[i] = n[1][j]*1;
                            }

                            if(j=='android'){
                                monthAndroidStartDatas[i] = n[1][j]*1;
                            }
                        }                    });
                    monthStartOptions.xAxis.categories = monthStartCategories;
                    monthStartOptions.series[0].data = monthTotalStartDatas;
                    monthStartOptions.series[1].data = monthIosStartDatas;
                    monthStartOptions.series[2].data = monthAndroidStartDatas;
                    chart = new Highcharts.Chart(monthStartOptions);
                }
            });
        }

    </script>
    <div id="content">
        <div id="content-header">
            <div id="breadcrumb">
                <a href="{{url('home')}}" title="返回首页" class="tip-bottom"><i class="icon-home"></i> 首页</a>
            </div>
        </div>
        <div class="container-fluid">
            <div class="widget-title">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab1">启动量</a></li>

                </ul>
            </div>

            <div class="widget-content tab-content">
                <div id="tab1" class="tab-pane active">
                    <div>
                        <p>
                            <button class="btn tip-top" id="dayStart">日</button>
                            <button class="btn tip-left" id="weekStart">周</button>
                            <button class="btn tip-right" id="monthStart">月</button>
                        </p>
                        <div id="dayStartCon" style="width: 1100px; height: 400px; margin: 0 "></div>
                        <div id="weekStartCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                        <div id="monthStartCon" style="width: 1100px; height: 400px; margin: 0; display: none; "></div>
                    </div>
                </div>


            </div>
        </div>


    </div>
    <script src="/js/matrix.tables.js"></script>
    <script type="text/javascript" src="{{URL::asset('js/')}}/common.js"></script>
    <script>
        $("#dayStart").click(function(){
            $("#dayStartCon").show();
            $("#weekStartCon").hide();
            $("#monthStartCon").hide();
        });

        $("#weekStart").click(function(){
            $("#dayStartCon").hide();
            $("#weekStartCon").show();
            $("#monthStartCon").hide();
        });

        $("#monthStart").click(function(){
            $("#dayStartCon").hide();
            $("#weekStartCon").hide();
            $("#monthStartCon").show();
        });


    </script>

@stop
